<template>
<!-- 商品组合套餐 -->
  <div class="modproDiv">
      <div class="pro_mod_title">
        <h3>新品尝鲜</h3>
        <p>买这些到两鲜：空运进口鲜奶、蔬菜、进口奶粉、海淘</p>
      </div>
      <div class="action_btn">
        <img
          src="http://qiniu.freshfresh.com/odoo_croped_ff_app_3_0_20190920202219_084b08.jpg?imageView2/2/w/800/q/100"
          alt
        />
      </div>
      <div class="pro_mod_list">
        <div class="swipe">
          <ul class="clearfix">
              <!-- 商品轮播图 -->
            <SwipeList></SwipeList>
          </ul>
        </div>
      </div>
  </div>

  
</template>

<script>
import SwipeList from './SwipeList'
export default {
  data() {
    return {
      current: 2
    };
  },
  components:{
      SwipeList
  },

  methods: {
    onChange(index) {
      this.current = index;
    }
  }
};
</script>

<style lang="scss">
// 多组合
.modproDiv {
  margin-top: 0.2rem;
  .pro_mod_title {
    background: #f8f6f7;
    padding: 0.15rem 0;
    text-align: center;
    color: #999;
    font-size: 0.24rem;
    line-height: 150%;
    h3 {
      height: 0.5rem;
      line-height: 0.5rem;
      color: #333;
      font-size: 0.26rem;
      font-weight: 600;
      display: inline-block;
      text-align: left;
    }
    p {
      line-height: 0.3rem;
      width: 96%;
      margin: 0 auto;
      font-size: 0.28rem;
    }
  }
  .action_btn {
    img {
      border: none;
      width: 100%;
      vertical-align: middle;
    }
  }
  .pro_mod_list {
    background: #f8f6f7;
    padding: 0.2rem 0;
    /* height: 3rem; */
    overflow: hidden;
    position: relative;
    .swipe {
      overflow: hidden;
      width: 100%;
      height: 100%;
      ul {
        width: 110%;
        margin: 0rem auto;
       /*  li {
          width: 21%;
          height: 3.3rem;
          margin-right: 0.01rem;
          float: left;
          text-align: center;
          position: relative;
          flex: initial;
          min-width: 2rem;
          a {
            color: #666;
            .lazy {
              width: 2rem;
              height: 2rem;
              margin-bottom: 0.08rem;
            }
            .mod_title {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 140%;
              padding: 0 0.1rem;
              font-size: 0.2rem;
            }
            .mod_price {
              color: #ff5454;
              font-weight: 600;
              margin-top: 0.05rem;
              font-size: 0.2rem;
            }
          }
        } */
      }
    }
  }
}
</style>